<template>
  <div class="register-container" >
    <h2 style=" color:red">医院挂号</h2><br>
    <el-form :model="registerForm" label-width="100px">
      <el-form-item label="身份证号">
        <el-input type="" v-model="registerForm.pid" ></el-input>
         <el-option v-for="patient in patients" :key="patient.pid" :label="patient.identify" :value="registerForm.pid"></el-option>
      </el-form-item>

      <el-form-item label="挂号科室" >
        <el-select v-model="registerForm.kid" placeholder="请选择挂号科室" @change="getDepartments(registerForm.kid)">
          <el-option v-for="keshi in keshis" :key="keshi.kid" :label="keshi.kname" :value="keshi.kid"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择医生">
        <el-select v-model="registerForm.did" placeholder="请选择医生" id="doc">
          <el-option v-for="docter in docters" :key="docter.did" :label="docter.dname" :value="docter.did"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="挂号日期">
        <el-date-picker v-model="registerForm.rgdate" type="date" placeholder="请选择挂号日期"></el-date-picker>
      </el-form-item>
      <el-form-item label="挂号金额">
        <el-input disabled v-model="registerForm.rgprice" ></el-input>
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="submitRegistration">提交挂号</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      registerForm: {
        pid: '',
        kid: '',
        did: '',
        rgdate: '',
        rgprice: 5
      },
      patients: [],//病人
      keshis: [],//科室
      docters: [],//

    };
  },
  methods: {
    getDepartments(kid){
      document.getElementById("doc").value = "";
            this.$axios.get("docter/kidAll?kid="+kid)
            .then((result) => {
                    let vo = result.data;
                    if (vo.code == 200) {
                        this.docters = vo.data;
                    }
                }).catch((err) => {
                    console.log(err);
                });    
        },
    // 提交挂号信息
    async submitRegistration() {
        const response = await this.$axios.post("regin/addregin", this.registerForm);
        alert("挂号成功！");
        this.registerForm={};
    }
  },
  
  mounted() {
    this.$axios.get("keshi/keshiList")
            .then((result) => {
                    let vo = result.data;
                    if (vo.code == 200) {
                         this.keshis = vo.data;
                    }
                }).catch((err) => {
                    console.log(err);
                });
  }
};
</script>


<style scoped>

.register-container {
  max-width: 600px;
  margin: 0 auto;
  
}
.success-message {
  color: green;
  margin-top: 10px;
}
.error-message {
  color: red;
  margin-top: 10px;
}
</style>